<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>append的是整行，所以表格名字也会跟着排序变化</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="800" align="center" style="text-align: center">
    <thead>
    <th>编号</th>
    <th>名字</th>
    </thead>
    <tbody>
    <tr>
        <td>AAA</td>
        <td>14</td>
    </tr>
    <tr>
        <td>BBB</td>
        <td>85</td>
    </tr>
    <tr>
        <td>CCC</td>
        <td>66</td>
    </tr>
    <tr>
        <td>DDD</td>
        <td>125</td>
    </tr>
    <tr>
        <td>EEE</td>
        <td>6</td>
    </tr>
    <tr>
        <td>FFF</td>
        <td>39</td>
    </tr>
    <tr>
        <td>GGG</td>
        <td>27</td>
    </tr>
    <tr>
        <td>HHH</td>
        <td>34</td>
    </tr>
    <tr>
        <td>AAA</td>
        <td>73</td>
    </tr>
    <tr>
        <td>FFF</td>
        <td>3</td>
    </tr>
    </tbody>
</table>
<button id="btn" style="margin-left: 900px;margin-top: 20px">排序</button>
<script>
    var oBtn = document.getElementById('btn');
    var oTable = document.getElementsByTagName('table')[0];
    var aRows = oTable.tBodies[0].rows;
    var arr = [];

    oBtn.onclick = function () {
        for (var i=0;i<aRows.length;i++){
            arr[i] = aRows[i];
        }

        arr.sort(function (a1,a2) {
            var n1 = a1.cells[1].innerHTML;
            var n2 = a2.cells[1].innerHTML;

            return n1-n2;
        })

        for (var i=0;i<arr.length;i++){
            oTable.appendChild(arr[i]);
        }

    }


</script>


























</body>
</html>